{% extends 'base.html' %}

{% block basecontent %}
    <!-- 主体内容  -->
    <div class="system-box claim-box clearfix">
        <!-- 左侧导航 -->
        <!-- 左侧导航 -->
        <style type="text/css">
            .cpc-sidebar-shop {
                position: fixed;
                width: 205px;
                top: 0px;
                left: 220px;
                padding-left: 0;
                border: none;
                text-align: left;
                z-index: 999999;
            }

            .cpc-sidebar-shop .cpc-shop {
                font-size: 12px;
                margin-left: 10px;
                padding-top: 8px;
                padding-right: 0;
                height: 48px;
                overflow: visible;
                text-align: left;
            }

            .cpc-sidebar-shop .cpc-shop:after {
                border: none;
            }

            .cpc-sidebar-shop:hover .cpc-shop {
                color: #26b9d1;
            }

            .cpc-sidebar-shop .cpc-shop .name {
                display: inline-block;
                max-width: 65%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                vertical-align: middle;
                margin-left: 10px;
            }

            .cpc-sidebar-shop:hover .icon-down {
                background-position: -271px -74px;
                transform: rotate(-180deg);
            }

            .cpc-sidebar-shop .finance-filter-box {
                top: 54px;
            }

            .cpc-sidebar-shop .finance-filter-list li {
                float: left;
                color: #b3b3b3;
                width: 48%;
                margin: 1px 2% 1px 0;
                line-height: 22px;
                border-radius: 4px;
                padding-bottom: 2px;
                text-align: left;
                text-indent: 15px;
                background: #EFEFEF;
            }

            .cpc-sidebar-shop .finance-filter-list li b {
                color: #b3b3b3;
                text-indent: 2px;
                vertical-align: middle;
            }

            .cpc-sidebar-shop .finance-filter-list li.active {
                background: #26b9d1;
            }

            .cpc-sidebar-shop .finance-filter-list li:hover b {
                color: #26b9d1;
            }

            .cpc-sidebar-shop .finance-filter-list li.active b,
            .cpc-sidebar-shop .finance-filter-list li.active:hover b {
                color: #fff;
            }

            @media screen and (max-width: 1450px) {
                .cpc-sidebar-shop {
                    left: 190px;
                }
            }
        </style>

        <div class="cpc-sidebar" style="left: 0px;">
            <div class="cpc-sidebar-tele js-sidebar-tele">
                <i class="layer"></i>
                <i class="cpcIcon icon-tele"></i>
            </div>
            <div class="common-help-box" style="text-align: center;">
                <a class="item" href="javascript:void(0);" onclick="helpfun()">
                    <i class="icon icon-common-help middle"></i>
                    <span class="middle">帮助文档</span>
                </a>
            </div>
            <ul class="cpc-sidebar-list js-cpc-sidebar scrollbar">
                {% for topmenu in menu.menu %}
                    {% if topmenu.menuId == menu.topmenuId %}
                        {% for cmenu in topmenu.childMenu %}
                            {% if cmenu.childMenuId == menu.childmenuId %}
                                <li class="active">
                                    {% else %}
                                <li class="">
                            {% endif %}
                        <a class="one" href="javascript:;"><i class="{{ cmenu.childMenuIcon }}"></i> &nbsp;<b
                                class="name ">{{ cmenu.childMenuTitle }}</b></a>
                        <div class="second-list-box" style="display: block;">
                            <ul class="second-list">
                                {% for smenu in cmenu.sunMenu %}
                                    {% if smenu.sunMenuId == menu.sunmenuId %}
                                        <li class="active">
                                            {% else %}
                                        <li class="">
                                    {% endif %}
                                <a href={% url smenu.sunUrl %}?menuid={{ smenu.sunMenuId }}>
                                    <font class="   ">{{ smenu.sunMenuTitle }}</font>
                                </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        </li>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </ul>
            <script type="text/javascript">

                $(".js-cpc-sidebar .one").click(function (e) {
                    e.stopPropagation();
                    $(this).siblings(".second-list-box").slideToggle();
                })
            </script>
        </div>
        <script type="text/javascript">
            $(function () {
                // 默认左侧导航伸缩状态
                var sidebar_tele = sessionStorage.getItem("fianace-tele");
                var leftMenu = getUrlParms("leftMenu");
                if (sidebar_tele == 1 || leftMenu == 1) {
                    $(".cpc-sidebar").show().addClass("retract").css("left", "-136px");
                    $(".finance-wrapper,.claim-main").css("marginLeft", "42px");
                    var route_w = $(window).width() - 42;
                    $(".oper-fixed-table").css({"left": 42, "width": route_w}, 400);
                    $(".cpc-sidebar").find(".second-list-box").hide();
                    $(".cpc-sidebar").find(".third-more").hide();
                    $(".common-video-box .item").hide();
                } else {
                    $(".cpc-sidebar").show().css("left", 0);
                    $(".finance-wrapper,.claim-main").css("marginLeft", "180px");
                    var route_w = $(window).width() - 180;
                    $(".oper-fixed-table").css({"left": 180, "width": route_w});
                    $(".cpc-sidebar").find(".second-list-box").show();
                    $(".cpc-sidebar").find(".third-more").show();
                    $(".common-video-box .item").show();
                }

                // 左侧菜单伸缩
                $(".js-sidebar-tele").click(function () {
                    var par = $(this).parents(".cpc-sidebar");
                    if (par.hasClass("retract")) {
                        if ($(".table-scroll").length > 0) {
                            var tableW = $(".table-scroll").width() - 138;
                            var left = $(".table-scroll").offset().left + 138;
                            $(".table-header-fixed-box").animate({"left": left, "width": tableW}, 400);
                            $(".table-header-fixed-box .table-header-fixed.scroll").animate({"width": tableW}, 400);
                        }
                        var route_w = $(window).width() - 180;
                        $(".oper-fixed-table").animate({"left": 180, "width": route_w}, 400);
                        par.animate({"left": 0}, 400);
                        $(".finance-wrapper,.claim-main").animate({"marginLeft": 180}, 400);
                        par.find(".second-list-box").show();
                        par.find("li .icon-triangle").addClass("active");
                        par.find("li.active").addClass("open");
                        par.removeClass("retract");
                        par.find(".third-more").show();
                        $(".common-video-box .item").show();
                        sessionStorage.setItem("fianace-tele", 0);
                    } else {
                        var route_w = $(window).width() - 42;
                        $(".finance-wrapper,.claim-main").animate({"marginLeft": 42}, 400);
                        $(".oper-fixed-table").animate({"left": 42, "width": route_w}, 400);
                        if ($(".table-scroll").length > 0) {
                            var tableW = $(".table-scroll").width() + 138;
                            var left = $(".table-scroll").offset().left - 138;
                            $(".table-header-fixed-box").animate({"left": left, "width": tableW}, 400);
                            $(".table-header-fixed-box .table-header-fixed.scroll").animate({"width": tableW}, 400);
                        }
                        par.animate({"left": "-136"}, 400, function () {
                            par.addClass("retract");
                            par.find(".second-list-box").hide();
                            par.find(".third-more").hide();
                            $(".common-video-box .item").hide();
                        });
                        sessionStorage.setItem("fianace-tele", 1);

                    }

                    if (window.sidebar_change) {
                        setTimeout(function () {
                            sidebar_change();
                        }, 400);
                    }
                });

                $(window).resize(function () {
                    var sidebar_tele = sessionStorage.getItem("fianace-tele");
                    if (sidebar_tele == 1) {
                        var route_w = $(window).width() - 42;
                        $(".oper-fixed-table").css({"left": 42, "width": route_w});
                    } else {
                        var route_w = $(window).width() - 180;
                        $(".oper-fixed-table").css({"left": 180, "width": route_w});
                    }
                });
            });
        </script>
{#        <script src="/static/basestatic/js/animateNumber.min.js"></script>#}
        <script>
            function helpfun() {
                layui.use('layer', function () {
                    var layer = layui.layer;

                    layer.config({
                        extend: 'myskin/style.css',
                    });

                    layer.open({
                        type: 1,
                        title: "帮助文档",
                        offset: '60px',
                        area: ['55%', '80%'],
                        shade: [0.8, '#393D49'],
                        shadeClose: true,
                        move: false,
                        resize: false,
                        content: "<h1>加紧编写中！！！</h1><img src='/static/gif/write.gif'/>",//这里content是一个普通的String
                        skin: 'mypop-ups'          //仅限于单个模态框的使用
                    });

                });

            }
        </script>

        <div class="claim-main">
            {% block content %}

            {% endblock content %}
        </div>

    </div>

{% endblock basecontent %}

